import { LockOutlined,UserOutlined } from '@ant-design/icons';
import { Alert} from 'antd';
import React from 'react';
import ProForm, { ProFormText } from '@ant-design/pro-form';
import { connect } from 'umi';
import md5 from 'blueimp-md5';
import styles from './index.less';

const LoginMessage = ({ content }) => (
  <Alert style={{ marginBottom: 24 }} message={content} type="error" showIcon />
);

const Login = (props) => {
  const { userLogin = {}, submitting } = props;
  const { status, type: loginType } = userLogin;

  const handleSubmit = (values) => {
    const { dispatch } = props;
    dispatch({
      type: 'login/login',
      payload: { ...values, password: md5(values.password), type: 'account' },
    });
  };

  return (
    <div className={styles.main}>
      <ProForm
        initialValues={{ autoLogin: true }}
        submitter={{
          render: (_, dom) => dom.pop(),
          submitButtonProps: { loading: submitting, size: 'large', style: { width: '100%' } },
        }}
        onFinish={(values) => {
          handleSubmit(values);
          return Promise.resolve();
        }}
      >
        {status === 'error' && loginType === 'account' && !submitting && (
          <LoginMessage content={'账户或密码错误'} />
        )}
        <ProFormText
          name="user"
          fieldProps={{ size: 'large', prefix: <UserOutlined className={styles.prefixIcon} /> }}
          placeholder="用户名"
          rules={[{ required: true, message: '请输入用户名!' }]}
        />
        <ProFormText.Password
          name="password"
          fieldProps={{ size: 'large', prefix: <LockOutlined className={styles.prefixIcon} /> }}
          placeholder="密码"
          rules={[{ required: true, message: '请输入密码！' }]}
        />
      </ProForm>
    </div>
  );
};

export default connect(({ login, loading }) => ({
  userLogin: login,
  submitting: loading.effects['login/login'],
}))(Login);
